<template>
	<view>
		<view class="head">
			<u-navbar bgColor="transparent" leftIconSize="20px" autoBack="true"></u-navbar>
			<view class="user-card"></view>
			<view class="wrapper">
				<view class="image">
					<image :src="userInfo.headImgUrl || '/static/images/default_avatar.png'"></image>
				</view>
				<view class="name flex-row row-between-wrapper">
					<text>{{userInfo.userName || ''}}</text>
					<text @click="contact(userInfo.contactPhone)">打电话</text>
				</view>
				<view class="line"></view>
				<view class="store">{{userInfo.storeName || ''}}</view>
				<view class="intro flex-row row-middle">
					<image src="../../../static/images/pro_12.png"></image>
					<text>{{(userInfo.province || '') + (userInfo.city || '') + (userInfo.area || '')  + (userInfo.address || '')}}</text>
				</view>
			</view>
			<view></view>
		</view>
		<view class="list flex-row row-column">
			
		</view>
	</view>
</template>

<script>
	import {
		getUserDetail
	} from "@/api/user.js";
	export default {
		data() {
			return {
				uid: 0,
				userInfo: {}
			}
		},
		
		onLoad(option) {
			let that = this;
			that.uid = option.uid;
			that.getUserDetail();
		},
		
		onShow() {
			
		},
		
		methods: {
			getUserDetail() {
				let that = this;
				getUserDetail({
					userInfoId: that.uid
				}).then(res => {
					that.userInfo = res.value
				}).catch(err => {
					that.$util.Tips({
						title: '该用户不存在'
					},{
						tab: 3
					})
				})
			},
			
			/**
			 * 拨打电话
			 */
			contact(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	
	view {
		box-sizing: border-box;
	}
	
	.head .user-card {
		position: relative;
		width: 100%;
		height: 538rpx;
		margin: 0 auto;
		padding: 34rpx 28rpx;
		background-image: url(/static/images/banner.png);
		background-size: 100% auto;
	}
	
	.head .wrapper {
	    background: #FFF;
	    margin: 0 15px;
	    border-radius: 8px;
	    position: relative;
	    margin-top: -120px;
		padding: 100rpx 50rpx 50rpx;
	}
	
	.head .wrapper .image {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: -75rpx;
		left: 60rpx;
	}
	
	.head .wrapper .image image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 4rpx solid #f5f5f5;
	}
	
	.head .wrapper .name text:first-child {
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.head .wrapper .name text:last-child {
		font-size: 24rpx;
		border-radius: 60rpx;
		padding: 10rpx 30rpx;
		background-color: #0EBC7E;
		color: #fff;
	}
	
	.head .wrapper .line {
		border-bottom: 1rpx solid #DCDCDC;
		margin: 25rpx 0;
	}
	
	.head .wrapper .store {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.head .wrapper .intro {
		margin-top: 20rpx;
	}
	
	.head .wrapper .intro image {
		width: 21rpx;
		height: 25rpx;
		margin-right: 5rpx;
	}
	
	.list {
		padding: 30rpx;
	}
</style>